<template>
	<view class="statistics">
		<picker class="time-picker flex align-center justify-center" @change="bindPickerChange" fields="month" mode="date" :value="date" :start="startDate" :end="endDate">
			<view class="flex-1 flex align-center justify-center">
				<text>{{ params.start_time ? `${params.start_time}至${params.end_time}` : '按时间选择' }}</text>
				<text class="iconfont">&#xe64c;</text>
			</view>
		</picker>
		
		<view class="margin-b40" v-for="(items, indexs) in lists" :key="indexs">
			<view class="lable">
				<text>{{items.title}}</text>
			</view>
			<view class="card">
				<view class="item" v-for="(item, index) in items.data" :key="index">
					<text>{{item.title}}</text>
					<text>{{item.value}}</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date: '',
				params:{
					start_time: '',
					end_time: ''
				},
				lists: []
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			const year = new Date().getFullYear()
			const month = new Date().getMonth() + 1
			let days = new Date(year, month, 0).getDate()
			this.params.start_time = `${year}-${month}-01`
			this.params.end_time = `${year}-${month}-${days}`
		},
		onShow() {
			this.getLists()
		},
		onShareAppMessage() {},
		onShareTimeline() {},
		methods:{
			getLists(){
				this.$api.reportListApi(this.params).then(res=>{
					console.log('res', res);
					this.lists = res.data
				}).catch(err=>{
					console.log(err);
				})
			},
			bindPickerChange(event) {
				const {value} = event.detail
				const year = this.$formatTime(value, 'YYYY')
				const month = this.$formatTime(value, 'MM')
				let days = new Date(year, month, 0).getDate()
				this.params.start_time = `${year}-${month}-01`
				this.params.end_time = `${year}-${month}-${days}`
				this.getLists()
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 60;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.statistics{
		padding: 32rpx;
		box-sizing: border-box;
		
		.time-picker{
			height: 64rpx;
			color: #333333;
			font-size: 24rpx;
			font-weight: 400;
			line-height: 40rpx;
			margin-bottom: 32rpx;
			border-radius: 12rpx;
			background-color: #FFFFFF;
			box-shadow: 0px 0px 100rpx rgba(0, 0, 0, 0.04);
			
			.iconfont{
				display: flex;
				font-size: 24rpx;
				font-weight: 600;
				padding-left: 16rpx;
			}
		}
		
		.lable{
			color: #999999;
			font-size: 24rpx;
			padding-bottom: 16rpx;
		}
		
		.card{
			padding: 0 32rpx;
		}
		
		.item{
			display: flex;
			color: #333333;
			padding: 32rpx 0;
			font-size: 26rpx;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #efefef;
			
			&:last-child{
				border-bottom: none;
			}
		}
	}
</style>
